<!-- 处置 -->
<template>
  <a-modal v-model:visible="visible" :mask-closable="false" :title="pageTlt" @close="onClose" width="45vw" unmount-on-close>
    <page-form :model="form" layout="vertical" div="true" class="page-form" :rules="rules" ref="formRef">
      <page-form-item field="disposalType" label="处置方式" size="1" required>
        <a-radio-group v-model="form.disposalType" :options="typeOptions" @change="typeChoose" />
      </page-form-item>
      <page-form-item field="disposalTime" :label="timeTlt" :rules="{ required: true, message: `请选择${timeTlt}` }" size="1/2" required>
        <i-date-picker v-model="form.disposalTime" style="width: 100%" format="YYYY-MM-DD" />
      </page-form-item>
      <page-form-item v-if="form.disposalType == 1 || form.disposalType == 2" field="disposalAmount" :label="numTlt" size="1/2">
        <i-input-number v-model="form.disposalAmount" unit="元" />
      </page-form-item>
      <page-form-item field="disposalRemark" label="备注" size="1/2">
        <a-input placeholder="请输入" allow-clear v-model="form.disposalRemark" :max-length="50" />
      </page-form-item>
    </page-form>

    <template #footer>
      <a-button @click="onClose">关闭</a-button>
      <a-button type="primary" @click="onConfirm" :loading="loading">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup name="CarDispose">
  import { ref, computed } from 'vue'

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    okLoading: {
      type: Boolean,
      default: false,
    },
  })

  const formRef = ref()
  const rules = {}

  const emits = defineEmits(['update:modelValue', 'update:okLoading', 'savedispose'])

  const visible = computed({
    get: () => props.modelValue,
    set: (val) => {
      emits('update:modelValue', val)
    },
  })

  const loading = computed({
    get: () => props.okLoading,
    set: (val) => {
      emits('update:okLoading', val)
    },
  })

  const form = ref({
    id: '',
    disposalType: '1',
    disposalTime: '',
    disposalAmount: '',
    disposalRemark: '',
  })

  const resetForm = () => {
    form.value.disposalTime = ''
    form.value.disposalAmount = ''
    form.value.disposalRemark = ''
    formRef.value.clearValidate()
  }

  const timeTlt = ref('出售时间')
  const numTlt = ref('出售金额')

  const typeChoose = (e) => {
    resetForm()
    if (e == 1) {
      timeTlt.value = '出售时间'
      numTlt.value = '出售金额'
    }
    if (e == 2) {
      timeTlt.value = '报废时间'
      numTlt.value = '补贴金额'
    }
    if (e == 3) {
      timeTlt.value = '归还时间'
    }
    if (e == 4) {
      timeTlt.value = '下线时间'
    }
  }

  // const disposalType = ref('')
  const typeOptions = [
    { label: '车辆出售', value: '1' },
    { label: '车辆报废', value: '2' },
    // { label: '借调车归还', value: '3' },
    { label: '其他', value: '4' },
  ]

  const pageTlt = ref('处置') //标题

  const show = (options) => {
    form.value.id = options.id
    if (options.source == 2) {
      typeOptions.splice(2, 0, { label: '借调车归还', value: '3' })
    }
  }

  const onClose = () => {
    visible.value = false
    formRef.value.resetFields()
    timeTlt.value = '出售时间'
    numTlt.value = '出售金额'
  }

  const onConfirm = () => {
    formRef.value.validate((error) => {
      if (!error) {
        emits('savedispose', form.value)
      }
    })
  }

  defineExpose({
    show,
  })
</script>

<style lang="less" scoped>
  .page-form {
    margin: 0;
    height: 300px;
    // padding: 0 60px;
    :deep(.arco-row) {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    :deep(.arco-modal-body) {
      padding: 10px 80px !important;
    }
    :deep(.arco-col) {
      padding: 0 10px !important;
    }
  }
</style>
